<template>
	<view>
		<uni-nav-bar :statusBar="true" dark title="球队详情" fixed left-icon="left" @clickLeft="clickLeft">
		</uni-nav-bar>
		<view>
			<view class="header_box">
				<image :src="url" mode=""></image>
				<view>
					<text>{{name}}</text>
				</view>
			</view>
		</view>

		<view class="content">
			<uni-forms class="form" ref="baseForm" :modelValue="baseFormData" :rules="customRules">
				<uni-forms-item labelWidth="240rpx" label="角色类型" required name="type">
					<uni-data-select v-model="baseFormData.type" :localdata="typeList" placeholder="请选择角色类型"
						@change="change">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item class="logo" labelWidth="240rpx" label="成员头像" required name="coachPhoto">
					<uni-file-picker :value="selectcoachPhoto" :autoUpload="false" limit="1" :del-icon="false" disable-preview
						:imageStyles="imageStyles" file-mediatype="image" @progress="progress"
						@select="select">选择</uni-file-picker>
						
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="姓名" required name="name">
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="请选择证件类型" required name="documentType">
					<uni-data-select v-model="baseFormData.documentType" :localdata="documentTypeList" placeholder="请选择证件类型"
						@change="change">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="证件号码" required name="documentNumber">
					<uni-easyinput v-model="baseFormData.documentNumber" placeholder="请输入证件号码" />
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="性别" required name="sex">
					<uni-data-select v-model="baseFormData.sex" :localdata="sexList" placeholder="请选择性别"
						@change="change">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="出生日期">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.birthday" @maskClick="maskClick" >
						<uni-easyinput v-model="baseFormData.birthday" placeholder="请输入出生日期" />
					</uni-datetime-picker>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottomBtn">
			<button @click="onCreated" type="submit" class="submit">
				提交
			</button>
		</view>
	</view>

</template>

<script>
	import {uploadAvatar,addCoachList, getCoachListInfo} from '@/api/basketballTeam/index.js'
	import {imageUrl} from '@/config.js'
	export default {
		data() {
			return {
				name: '',
				url: '',
				imageUrl: imageUrl,
				selectcoachPhoto: [],
				documentTypeList: [
					{value: 1, text: '身份证'},
					{value: 2, text: '港澳居民往来大陆通行证'},
					{value: 3, text: '台湾居民往来大陆通行证'},
					{value: 4, text: '护照'},
				],
				player: '',
				sexList: [{
						value: 0,
						text: "男"
					},
					{
						value: 1,
						text: "女"
					}
				],
				typeList: [{
						value: 1,
						text: "主教练"
					},
					{
						value: 2,
						text: "助理教练"
					},
					{
						value: 3,
						text: "领队"
					},
					{
						value: 4,
						text: "其他工作人员"
					},
					{
						value: 5,
						text: "队医"
					}
				],
				baseFormData: {
					coachPhoto: '',
					name: '',
					documentNumber: '',
					sex: '',
					type: '',
					birthday: '',
					documentType: ''
				},
				type: '',
				customRules: {
					coachPhoto: {
						rules: [{
							required: true,
							errorMessage: '请选择成员头像'
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择角色类型'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					documentType: {
						rules: [{
							required: true,
							errorMessage: '请选择证件类型'
						}]
					},
					documentNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入证件号'
						}]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别'
						}]
					}
				},
				imageStyles: {
					width: '100rpx',
					height: '100rpx',
					border: {
						radius: '50%'
					}
				},
				id: ''
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			select(e) {
				console.log('选择文件：', e)
				uploadAvatar({file: e.tempFiles[0].file}).then(res => {
					console.log(res, '---')
					this.baseFormData.coachPhoto = res.data;
				})
			},
			onCreated() {
				console.log(this.baseFormData)
				this.$refs['baseForm'].validate().then(res => {
					addCoachList(this.type ? this.type : 'post', {...this.baseFormData, playerId:this.player, id: this.id}).then(res => {
						this.$modal.msg(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 600)
					})
				})
			}
		},
		onLoad({
			url,
			name,
			id,
			type,
			player
		}) {
			this.name = name;
			this.url = url;
			this.id  = id
			this.type = type
			this.player =player
				
			if (type) {
				getCoachListInfo(id).then(res => {
					for (let key in this.baseFormData) {
						console.log(key)
						this.baseFormData[key] = res.data[key]
					}
					this.selectcoachPhoto = [{
						url: this.imageUrl + this.baseFormData.coachPhoto
					} ]
					console.log(this.baseFormData)
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.header_box {
		display: flex;
		align-items: center;
		font-weight: 800;
		padding: 30rpx 20rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 100%;
		}
	}

	.content {
		padding: 30rpx 20rpx;

		.logo {
			display: flex;
			align-items: center;
			padding-bottom: 40rpx;
		}

		::v-deep.uni-select {
			border: none;

			.uni-select__input-placeholder {
				color: #999;
			}
		}
	}
	.bottomBtn {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		position: fixed;
		width: 100%;
		bottom: 0;
		padding: 40rpx 30rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
		border-top: 1px solid #eee;
		.submit-text {
			display: flex;
			
			font-size: 24rpx;
		}
		.submit {
			background-color: $btn-bg-color;
			color: #fff;
			width: 100%;
			font-size: 34rpx;
			font-weight: 800;
			margin-top: 20rpx;
		}
	}
</style>